<template>
  <div class="out">
    <loading :state="loading"></loading>
    <svg class="icon quan" aria-hidden="true">
      <use xlink:href="#icon-shangcheng"></use>
    </svg>
    <div class="tips">一起瘦官方提醒您</div>
    <div>您将使用微信进行支付 </div>
    <div class="money">{{price}}</div>
    <div class="out-b">
      <div class="btn-reverse" @click="toPay">{{tips}}</div>
    </div>
  </div>
</template>

<script>
  import wx from 'weixin-js-sdk';
  import Types from '@/store/OperationType';
  import {Toast} from 'vant';
  export default {
    data() {
      return {
        style: '',
        pic: '',
        price: '',
        loading: true,
        pay: {},
        tips: '确定支付',
        money: `${this.$Public.ossImg}yue_payin.svg`,
        integral: `${this.$Public.ossImg}integral_payin.svg`,
        wx: `${this.$Public.ossImg}weixin_payin.svg`
      };
    },
    computed: {},
    watch: {
      // 监听具体数据变化，并做相应的处理
    },
    methods: {
      toPay() {
        if (this.pay === '') {
          Toast('获取微信信息失败');
        } else {
          let pay = this.pay;
          let cart = this;
          wx.config({
//             debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: pay.appId, // 必填，公众号的唯一标识
            timestamp: pay.timeStamp, // 必填，生成签名的时间戳
            nonceStr: pay.nonceStr, // 必填，生成签名的随机串
            signature: pay.paySign, // 必填，签名
            jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表
          });
          wx.ready(function () {
            wx.chooseWXPay({
              timestamp: pay.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
              nonceStr: pay.nonceStr, // 支付签名随机串，不长于 32 位
              package: pay.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
              signType: pay.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
              paySign: pay.paySign, // 支付签名
              success: function (res) {
                // 支付成功后的回调函数
                this.loading = true;
                cart.$Sale.getData().then((res) => {
                  cart.$store.commit(Types.SET_USER_REC, res.data.rec);
                  cart.$store.commit(Types.SET_USER_UID, res.data.uid);
                  // this.$store.commit(Types.SET_USER_IS_BIND_PHONE, res.isBindPhone);
                  // this.$store.commit(Types.SET_USER_IS_BUY, res.is_buy);
                  cart.$store.commit(Types.SET_USER_NAME, res.data.nick);
                  cart.$store.commit(Types.SET_USER_PIC, res.data.img);
                  cart.$store.commit(Types.SET_USER_PROVINCE, res.data.rank.level);
                  cart.$store.commit(Types.SET_USER_LEVEL, res.data.rank.levelCh);
                  cart.$router.push('orderList');
                }, () => {
                });
//                cart.isPay(cart);
              },
              fail: function (res) {
                alert(JSON.stringify(res));
              }
            });
          });
        }
      }
//      isPay(obj) {
//        obj.$Cart.isPay({id: obj.$route.query.id}).then(res => {
//          if (parseInt(res.result) === 1) {
//            this.loading = false;
//            obj.$router.push('orderList');
//          } else {
//            setTimeout(() => {
//              obj.isPay(obj);
//            }, 5000);
//          }
//        }, () => {
//          this.loading = false;
//        });
//      }
    },
    beforeCreate() {
      // 可以在这加个loading事件，在加载实例时触发
      // 这个阶段实例的data、methods是读不到的
    },
    created() {
      // 初始化数据，如在这结束loading事件，异步ajax请求也适宜在这里调用
      // 实例创建后：这个阶段已经完成了数据观测(data observer)，属性和方法的运算， watch/event 事件回调。
      // mount挂载阶段还没开始，"el" 属性目前不可见，数据并没有在DOM元素上进行渲染
      // let style = this.$route.query.way;
      // if (style === 'integral') {
      //   this.style = '积分';
      //   this.pic = this.integral;
      // } else if (style === 'balance') {
      //   this.style = '余额';
      //   this.pic = this.money;
      // } else if (style === 'wx') {
      //   this.style = '微信';
      //   this.pic = this.wx;
      // }
    },
    beforeMount() {
      // 相关的 render 函数首次被调用。
    },
    mounted() {
      this.price = this.$route.query.money;
      let id = this.$route.query.id;
      this.$Sale.paybase({id: id}).then(res => {
        this.loading = false;
        this.pay = JSON.parse(res.data);
      }, () => {
        this.loading = false;
      });
      // 挂载元素，获取到DOM节点
      // el选项的DOM节点 被新创建的 vm的el 替换，并挂载到实例上去之后调用此生命周期函数。此时实例的数据在DOM节点上进行渲染
    },
    beforeUpdate() {
      // 数据更新时调用，但不进行DOM重新渲染，在数据更新时DOM没渲染前可以在这个生命函数里进行状态处理
    },
    updated() {
      //  如果对数据统一处理，在这里写上相应函数
      // 这个状态下数据更新并且DOM重新渲染，当这个生命周期函数被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。当实例每次进行数据更新时updated都会执行
    },
    beforeDestroy() {
      // 可以做一个确认停止事件的确认框
    },
    destroyed() {
      // Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁
    }
  };

</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "../../assets/stylus/main.styl"
  .out
    text-align center
    font-size word14
    color #333
    .icon
      width vw(100)
      height vw(100)
      margin-top vw(100)
      fill #219222
    .tips
      font-weight bold
      margin-top vw(10)
      margin-bottom vw(10)
    .money
      color main-color
      font-size vw(24)
      margin-top vw(10)
    .out-b
      out()
      .btn-reverse
        btn-primary()
</style>
